<template>
	<view class="bills-layout">
		<!-- 类型 -->
		<view class="menu-box">
			<uv-tabs :list="menuList" :activeStyle="{color:'#5F56EF',fontSize:'32rpx',fontWeight:500}" :inactiveStyle="{color:'#333333',fontSize:'32rpx',fontWeight:500}" :itemStyle="{height:'80rpx'}" lineColor="#5F56EF" @click="selectMenuItem"></uv-tabs>
		</view>
		<view class="bills-container">
			<view v-if="selectType == 0">
				<xh-bills-card title="货款账单" :money="dataInfo.billUnpayAmount" bg="red" @cellClick="showHkBill"></xh-bills-card>
				<uv-gap height="30rpx"></uv-gap>
				<xh-bills-card title="考核账单" :money="dataInfo.assessUnpayAmount" bg="blue" @cellClick="showKHBill"></xh-bills-card>
				<view class="bills-container-header">
					<text>代理账单</text>
					<text>直属代理的考核账单详情</text>
				</view>
				<xh-bills-card title="考核账单(总)" :money="dataInfo.needIncomeAssessAmount" bg="green" @cellClick="showAgentList('考核')"></xh-bills-card>
			</view>
			<view v-if="selectType == 1">
				<xh-bills-card title="货款账单(总)" :money="dataInfo.needIncomeGoodsAmount" bg="red" @cellClick="showAgentList('货款')"></xh-bills-card>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue'
	import { getMyBill } from '@/common/api/api.js'
	import XhBillsCard from './widget/xh-bills-card.vue'
	const menuList = reactive([{ name: '我的待结', type: 0 }, { name: '我的待收', type: 1 }])
	const selectType = ref(0)
	const dataInfo = ref({
		billTotalAmount: 0,
		billPayAmount: 0,
		billUnpayAmount: 0,
		assessTotalAmount: 0,
		assessPayAmount: 0,
		assessUnpayAmount: 0,
		needIncomeGoodsAmount: 0,
		needIncomeAssessAmount: 0
	})
	const selectMenuItem = (item) => {
		selectType.value = item.type
		getMyBillInfo()
	}
	// 查看货款账单
	const showHkBill = () => {
		uni.navigateTo({
			url: '/pages/home/agent-manager/agent-info/payment-bill/payment-bill?type=货款'
		})
	}
	// 查看考核账单
	const showKHBill = () => {
		uni.navigateTo({
			url: '/pages/home/agent-manager/agent-info/payment-bill/payment-bill?type=考核'
		})
	}
	const showAgentList = (type) => {
		uni.navigateTo({
			url: `/pages/wallet/bills/bills-agent/bills-agent?type=${type}`
		})
	}
	// 获取账单数据
	const getMyBillInfo = async () => {
		const res = await getMyBill()
		dataInfo.value = res.result
	}
	onLoad(() => {
		getMyBillInfo()
	})
</script>

<style lang="scss" scoped>
	.bills-layout {
		.bills-container {
			padding: 30rpx;

			.bills-container-header {
				display: flex;
				flex-direction: column;
				padding: 30rpx 0;
				color: $xh-color-9;
				font-size: 24rpx;

				text:nth-child(1) {
					font-size: 30rpx;
					font-weight: 600;
					color: $xh-color-3;
					margin-bottom: 16rpx;
				}
			}
		}
	}
</style>